<script setup>
	import { onMounted, ref } from 'vue'
	import { onLoad, onShow, onShareAppMessage } from '@dcloudio/uni-app'
	import { http } from '@/utils/http.js'
	import { useUsercodeStore } from '@/store/usercode.js'

	const userCodeStore = useUsercodeStore()

	const goodid = ref()
	// 轮播图
	const info = ref([])
	// 处理手机
	function maskPhoneNumber(phoneNumber) {
		const start = phoneNumber.slice(0, 3)
		const end = phoneNumber.slice(-4)
		return start + '****' + end
	}
	// 处理富文本
	function replaceWhite(html) {
		// 使用 replace 方法替换匹配的部分为空字符串
		let newContent = html.replace(/style="[^"]*"/g, '')
		newContent = newContent.replace(
			/style="[^"]+"/gi,
			function (match, capture) {
				match = match
					.replace(/width:[^;]+;/gi, 'max-width:100%;')
					.replace(/width:[^;]+;/gi, 'max-width:100%;')
				return match
			}
		)
		newContent = newContent.replace(/<br[^>]*\/>/gi, '')
		newContent = newContent.replace(
			/\<img/gi,
			'<img style="max-width:100%;height:auto;display:block;margin:0;"'
		)
		return newContent
	}

	const goodsDetail = ref('')

	async function getDetail(id) {
		const res = await http.request({
			url: '/api/goods/goodsDetails',
			method: 'POST',
			data: {
				id: id,
			},
		})
		console.log(res)
		info.value = []
		if (res.data.imgs.length == 0) {
			info.value.push({ content: 'undefine', img: res.data.img })
		} else {
			res.data.imgs.forEach((item) => {
				info.value.push({ content: 'undefine', img: item })
			})
		}
		if (res.data.address_info) {
			res.data.address_info.mobile = maskPhoneNumber(
				res.data.address_info.mobile
			)
		}

		res.data.details = replaceWhite(res.data.details)
		goodsDetail.value = res.data
	}
	async function hope(id) {
		const res = await http.request({
			url: '/api/goods/scPost',
			method: 'POST',
			data: {
				id: id,
				type: '1',
			},
		})
		console.log(res)
		if (res.st == 1) {
			if (goodsDetail.value.is_sc == 1) {
				goodsDetail.value.is_sc = 0
			} else if (goodsDetail.value.is_sc == 0) {
				goodsDetail.value.is_sc = 1
			}
			uni.showToast({
				title: '操作成功',
				duration: 2000,
			})
		} else {
			uni.showToast({
				title: '操作失败',
				icon: 'error',
				duration: 2000,
			})
		}
	}

	const modeIndex = ref(3)
	const styleIndex = ref(-1)
	const dotsStyles = ref({
		backgroundColor: 'transparent',
		border: 'none',
		color: '#fff',
		selectedBackgroundColor: '#000',
		selectedBorder: 'none',
		width: '3',
		height: '3',
	})
	const swiperDotIndex = ref(0)
	const current = ref(0)
	const mode = ref('nav')

	function change(e) {
		current.value = e.detail.current
	}
	function clickItem(e) {
		swiperDotIndex.value = e
	}
	function onBanner(index) {
		console.log(22222, index)
	}

	// 购买弹窗
	const buypopup = ref()
	function buyPop() {
		if (
			userCodeStore.usercode.token == '' ||
			userCodeStore.usercode.userId == ''
		) {
			uni.utils.toast('为了让您有更好的体验，请先登录')
			setTimeout(() => {
				uni.navigateTo({
					url: `/pages/login/login`,
				})
			}, 2000)
			return
		}
		if (
			userCodeStore.usercode.isAddress == 0 &&
			userCodeStore.usercode.token != ''
		) {
			uni.utils.toast('为了让您有更好的体验，请先完善物流信息')
			setTimeout(() => {
				uni.navigateTo({
					url: `/minePage/editaddress/index`,
				})
			}, 2000)
			return
		}
		buypopup.value.open('bottom')
	}
	const num = ref(1)
	function changenum(e) {
		num.value = e
		console.log(num.value)
	}
	function goOrder() {
		console.log(num.value)
		if (num.value <= 0) {
			uni.showToast({
				title: '购买数量不可以小于0',
				icon: 'error',
				duration: 2000,
			})
			num.value = 1
			return
		} else if (
			goodsDetail.value.kc == 0 ||
			Number(goodsDetail.value.kc) < num.value
		) {
			uni.utils.toast('库存不足')
			return
		}
		uni.navigateTo({
			url: `/homePage/order/index?buynum=${num.value}&id=${
				goodsDetail.value.id
			}&totalPrice=${(
				Number(num.value) * Number(goodsDetail.value.price)
			).toFixed(2)}&integral=${
				goodsDetail.value.is_integral
			}&totalIntegral=${(
				Number(num.value) * Number(goodsDetail.value.integral)
			).toFixed(2)}&buyintegral=${goodsDetail.value.integral}`,
		})
		buypopup.value.close('bottom')
	}

	// 心愿单
	function checkHope() {
		uni.navigateTo({
			url: `/minePage/hopelist/index`,
		})
	}

	// 联系客服
	const servicepopup = ref()
	function service() {
		servicepopup.value.open('center')
	}

	function scan(url) {
		uni.previewImage({
			urls: [url],
			longPressActions: {
				itemList: ['发送给朋友', '保存图片', '收藏'],
				success: (res) => {
					console.log(res)
				},
				fail: (res) => {
					console.log(res.errMsg)
				},
			},
		})
	}

	//隐藏接口
	const hidding = ref(true)
	function hidePart() {
		if (userCodeStore.usercode.mobile == '18254076917') {
			hidding.value = false
		} else {
			hidding.value = true
		}
	}

	onShareAppMessage(() => {
		return {
			title: '快来帮我看看我挑中的商品',
			path: `homePage/goodsinfo/index?id=${goodid.value}`,
		}
	})
	onLoad((option) => {
		goodid.value = option.id
	})
	onShow(() => {
		hidePart()
		getDetail(goodid.value)
	})
</script>

<template>
	<view class="content">
		<!-- 轮播图 -->
		<uni-swiper-dot
			class="uni-swiper-dot-box"
			@clickItem="clickItem"
			:info="info"
			:current="current"
			:mode="mode"
			:dots-styles="dotsStyles"
			field="content"
		>
			<swiper
				@change="change"
				class="swiper-box"
				:current="swiperDotIndex"
			>
				<swiper-item v-for="(item, index) in info" :key="index">
					<view class="swiper-item" :class="'swiper-item' + index">
						<!-- <text style="color: #fff; font-size: 32px">{{
							index + 1
						}}</text> -->
						<image
							style="width: 100%; height: 750rpx"
							:src="item.img"
						></image>
					</view>
				</swiper-item>
			</swiper>
		</uni-swiper-dot>

		<!-- 价格详情 -->
		<view class="price-detail">
			<view class="price">
				<image
					v-if="goodsDetail.is_integral == 1"
					style="width: 44rpx; height: 44rpx; margin-right: 10rpx"
					src="../../static/icon.png"
					mode=""
				></image>
				<text v-else style="font-size: 34rpx; color: #f75b5b">￥</text>
				<text
					v-if="goodsDetail.is_integral == 1"
					style="font-size: 54rpx; color: #f75b5b"
					>{{ goodsDetail.integral }}</text
				>
				<text v-else style="font-size: 54rpx; color: #f75b5b">{{
					goodsDetail.price
				}}</text>
			</view>
			<view class="name">
				<!-- <view class="nameinfo"> -->
				<text class="goods_name">{{ goodsDetail.goods_name }}</text>
				<!-- </view> -->
				<view class="love" @click="hope(goodsDetail.id)">
					<uni-icons
						:type="
							goodsDetail.is_sc == 0 ? 'heart' : 'heart-filled'
						"
						:color="goodsDetail.is_sc == 1 ? '#EC5050' : ''"
						size="22"
					></uni-icons>
					<text style="font-size: 20rpx">收藏</text>
				</view>
			</view>
			<view class="detail">
				<text
					>运费:{{ goodsDetail.is_by == 1 ? '包邮' : '不包邮' }}</text
				>
				<text>销量:{{ goodsDetail.sell_num }}</text>
				<text>库存:{{ goodsDetail.kc }}</text>
			</view>
		</view>

		<!-- 规格地址 -->
		<view class="specadd">
			<view class="spec">
				<text style="font-size: 28rpx">规格</text>
				<text style="font-size: 24rpx; color: #b1b0b8">{{
					goodsDetail.spec
				}}</text>
			</view>
			<view class="address" @click="addressPop">
				<text>配送</text>
				<view class="addinfo">
					<view class="info" v-if="goodsDetail.address_info">
						<text style="font-size: 24rpx">{{
							goodsDetail.address_info.province +
							goodsDetail.address_info.city +
							goodsDetail.address_info.area
						}}</text>
						<text class="address-center">{{
							goodsDetail.address_info.address
						}}</text>
						<view style="font-size: 24rpx; color: #3d3d3d"
							>{{
								goodsDetail.address_info.name
							}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<text
								style="font-size: 22rpx; color: #898989"
								>{{ goodsDetail.address_info.mobile }}</text
							></view
						>
					</view>
					<view class="info" v-else>
						<text class="address-center"> 请先完善物流信息 </text>
					</view>
					<!-- <view class="aim"> </view> -->
				</view>
			</view>
		</view>
		<view
			class="goodinfo"
			style="
				text-align: center;
				font-size: 28rpx;
				color: #3d3d3d;
				margin: 18rpx 0;
			"
			>商品详情</view
		>

		<rich-text :nodes="goodsDetail.details"></rich-text>
		<!-- 底部固定部分 -->
		<view class="bottom">
			<view class="bottom-left">
				<!-- <view class="warehouse">
					<image
						style="width: 46rpx; height: 46rpx"
						src="../../static/warehouse.png"
						mode=""
					></image>
					<text style="font-size: 20rpx; color: #3d3d3d">背包</text>
				</view> -->
				<view class="service" v-if="hidding" @click="service">
					<image
						style="width: 38rpx; height: 38rpx; padding: 4rpx"
						src="../../static/service.png"
						mode=""
					></image>
					<text style="font-size: 20rpx; color: #3d3d3d">客服</text>
				</view>
			</view>
			<view class="bottom-right">
				<button class="xinyuan" type="primary" @click="checkHope">
					去心愿单
				</button>
				<button
					type="primary"
					plain="true"
					disabled="true"
					v-if="goodsDetail.is_ys == 1"
				>
					正在预售
				</button>
				<button
					class="buy"
					type="primary"
					plain="true"
					@click="buyPop"
					v-else
				>
					立即购买
				</button>
			</view>
		</view>

		<!-- 购买弹出框 -->
		<uni-popup ref="buypopup" type="bottom">
			<view class="buypopup-content">
				<view class="top">
					<image
						style="
							width: 180rpx;
							height: 180rpx;
							border-radius: 20rpx;
						"
						:src="goodsDetail.img"
						mode=""
					></image>
					<view class="info">
						<view class="price">
							<image
								v-if="goodsDetail.is_integral == 1"
								style="
									width: 44rpx;
									height: 44rpx;
									margin-right: 10rpx;
								"
								src="../../static/icon.png"
								mode=""
							></image>
							<text
								v-else
								style="font-size: 34rpx; color: #f75b5b"
								>￥</text
							>
							<text
								v-if="goodsDetail.is_integral == 1"
								style="font-size: 54rpx; color: #f75b5b"
								>{{ goodsDetail.integral }}</text
							>
							<text
								v-else
								style="font-size: 54rpx; color: #f75b5b"
								>{{ goodsDetail.price }}</text
							>
						</view>
						<view class="detail">
							<text
								style="
									margin-left: 7rpx;
									font-size: 24rpx;
									color: #898989;
								"
								>已选</text
							>
							<text
								style="
									margin-left: 20rpx;
									font-size: 24rpx;
									color: #3d3d3d;
								"
								>{{ goodsDetail.spec }}</text
							>
						</view>
					</view>
				</view>
				<view class="center">
					<text style="font-size: 24rpx; color: #3d3d3d">数量</text>
					<uni-number-box
						:min="1"
						:max="9999"
						v-model="num"
						@change="changenum"
					></uni-number-box>
				</view>
				<view style="text-align:left;font-size: 24rpx; color: #bbbbbb">
					仅支持发货不支持退回
				</view>
				<button type="primary" @click="goOrder">确认</button>
			</view>
		</uni-popup>

		<!-- 客服弹出层 -->
		<uni-popup ref="servicepopup" type="center">
			<view class="servicepopup-content">
				<image
					@longpress="
						scan(
							'https://ojqn.wm2177.com/wechat_imgs/mine/service.png'
						)
					"
					src="https://ojqn.wm2177.com/wechat_imgs/mine/service.png"
					style="width: 100%; height: 100%"
					mode=""
				></image>
			</view>
		</uni-popup>
	</view>
</template>

<style lang="scss" scoped>
	.content {
		padding-bottom: 170rpx;
		background-color: #f4f4f4;
		.uni-swiper-dot-box {
			width: 100%;
		}
		.swiper-box {
			height: 750rpx;
		}

		.swiper-item {
			/* #ifndef APP-NVUE */
			display: flex;
			/* #endif */
			flex-direction: column;
			justify-content: center;
			align-items: center;
			height: 750rpx;
			color: #fff;
			background-color: #fff;
		}

		// .swiper-item0 {
		// 	background-color: #cee1fd;
		// }

		// .swiper-item1 {
		// 	background-color: #b2cef7;
		// }

		// .swiper-item2 {
		// 	background-color: #cee1fd;
		// }
		::v-deep .uni-swiper__dots-nav-item {
			position: absolute;
			right: -132rpx;
			font-size: 24rpx;
			margin: 0 31rpx !important;
		}

		.price-detail {
			// width: 100%;
			height: 328rpx;
			margin: 22rpx;
			padding: 24rpx;
			border-radius: 20rpx;
			background-color: #fff;
			box-sizing: border-box;
			.name {
				display: flex;
				align-items: center;
				justify-content: space-between;
				box-sizing: border-box;
				padding: 16rpx 0 36rpx 0;
				border-bottom: 1px solid #f5f5f5;
				.goods_name {
					display: block;
					width: 90%;
					margin-right: 22rpx;
					font-size: 32rpx;
					box-sizing: border-box;

					display: -webkit-box;
					-webkit-line-clamp: 2; /* 限制为两行 */
					-webkit-box-orient: vertical;
					overflow: hidden; /* 隐藏超出部分 */
					text-overflow: ellipsis; /* 超出部分用省略号表示 */
					white-space: normal; /* 允许换行 */
					/* 你可能还想设置一些其他样式，比如宽度、字体大小等 */
				}
				.love {
					display: flex;
					flex-direction: column;
					align-items: center;
				}
			}
			.detail {
				margin-top: 34rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 24rpx;
				color: #b1b0b8;
			}
		}
		.specadd {
			height: 250rpx;
			margin: 0 22rpx 22rpx;
			padding: 22rpx;
			border-radius: 20rpx;
			background-color: #fff;
			box-sizing: border-box;
			.spec {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding-bottom: 28rpx;
				border-bottom: 1px solid #f5f5f5;
			}
			.address {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding-top: 14rpx;
				box-sizing: border-box;
				.addinfo {
					display: flex;
					align-items: center;
					width: 70%;
					.info {
						display: flex;
						flex-direction: column;
						// margin-right: 60rpx;
					}
					.address-center {
						width: 100%;
						font-size: 28rpx;
						color: #3d3d3d;
						line-height: 62rpx;

						display: -webkit-box;
						-webkit-line-clamp: 1; /* 限制为两行 */
						-webkit-box-orient: vertical;
						overflow: hidden; /* 隐藏超出部分 */
						text-overflow: ellipsis; /* 超出部分用省略号表示 */
						white-space: normal; /* 允许换行 */
						/* 你可能还想设置一些其他样式，比如宽度、字体大小等 */
					}
					.aim {
						width: 15rpx;
						height: 15rpx;
						border-top: 1px solid #b1b0b8;
						border-right: 1px solid #b1b0b8;
						transform: rotate(45deg);
					}
				}
			}
		}
		.bottom {
			position: fixed;
			left: 0;
			bottom: 0;
			width: 750rpx;
			height: 164rpx;
			background: #fff;
			display: flex;
			align-items: center;
			.bottom-left {
				display: flex;
				align-items: center;
				justify-content: space-evenly;
				width: 30%;
				.warehouse {
					display: flex;
					flex-direction: column;
					align-items: center;
				}
				.service {
					display: flex;
					flex-direction: column;
					align-items: center;
				}
			}
			.bottom-right {
				display: flex;
				align-items: center;
				width: 70%;
				button {
					height: 82rpx;
					padding: 0 56rpx !important;
					border-radius: 41rpx;
					line-height: 78rpx;
					font-size: 30rpx;
				}
				.xinyuan {
					background-color: $all-color !important;
				}
				.buy {
					border: 1px solid $all-color !important;
					color: $all-color !important;
				}
			}
		}
		// 购买弹出框

		.buypopup-content {
			align-items: center;
			justify-content: center;
			padding: 28rpx;
			height: 502rpx;
			background-color: #fff;
			border-radius: 22rpx 22rpx 0 0;
			box-sizing: border-box;
			text-align: center;
			.top {
				display: flex;
				align-items: center;
				.info {
					display: flex;
					flex-direction: column;
					align-items: start;
					margin-left: 20rpx;
					.detail {
						margin-top: 30rpx;
					}
				}
			}
			.center {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 46rpx;
				::v-deep .uni-numbox {
					height: 44rpx !important;
					width: 128rpx;
					border-radius: 22rpx;
					border: 1px solid #eeeeee;
					line-height: 44rpx !important;
				}
				::v-deep .uni-numbox__minus {
					width: 44rpx !important;
					height: 44rpx !important;
					border: none;
					background-color: #fff;
					border-radius: 22rpx 0 0 22rpx;
					text {
						font-size: 20rpx;
						line-height: 22rpx;
						color: #3d3d3d;
					}
				}
				::v-deep .uni-numbox__value {
					width: 44rpx !important;
					height: 44rpx !important;
					border: none;
					border-left: 1px solid #eeeeee;
					border-right: 1px solid #eeeeee;
					// background-color: #fff;
					font-size: 20rpx;
					color: #3d3d3d;
				}
				::v-deep .uni-numbox__plus {
					width: 44rpx !important;
					height: 44rpx !important;
					border: none;
					background-color: #fff;
					border-radius: 0 22rpx 22rpx 0;
					text {
						font-size: 20rpx;
						line-height: 22rpx;
						color: #3d3d3d;
					}
				}
			}
			button {
				height: 82rpx;
				background-color: $all-color;
				margin-top: 11%;
				border-radius: 42rpx;
				font-size: 28rpx;
				line-height: 82rpx;
			}
		}
		.servicepopup-content {
			width: 702rpx;
			height: 906rpx;
			border-radius: 40rpx;
			overflow: hidden;
		}
	}
</style>
